<template>
  <bm-overlay ref="customOverlay" class="around" pane="labelPane" @click.native="panelClick" @draw="draw">
    <div>
      <!-- div中的内容可自己调整 -->
      <p>{{text.Address}}</p>
      <!-- <p>{{Math.ceil(text.initialPrice / 10000)}}万</p> -->
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ["text", "position", "active"],
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload();
      },
      deep: true
    }
  },
  methods: {
    draw({ el, BMap, map }) {
      const { lng, lat } = this.position;
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      // 让周边房源气泡的中心和坐标对应上
      el.style.left = pixel.x - 61 + "px";
      el.style.top = pixel.y - 18 + "px";
    },
    panelClick() {
      console.log("点击了", this.position);
      this.$emit("panelClick", this.text);
    }
  }
};
</script>

<style lang="scss" scoped>
.around {
  overflow: hidden;
  height: 50px;
  padding: 5px;
  box-shadow: 0 0 1px #bbb;
  background-color: rgba(58, 126, 255, 0.9);
  color: #fff;
  text-align: center;
  position: absolute;
  line-height: 14px;
  border-radius: 5px;
  box-sizing: border-box;

  div {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    justify-content: space-between;
  }
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
  }
}
.around:active {
  z-index: 1;
  // background-color: rgba(240, 65, 52, 0.9);
  background-color: rgba(240, 65, 52, 0.9);
  color: #fff;
}
.around:hover {
  z-index: 1;
  background-color: rgba(240, 65, 52, 0.9);
  color: #fff;
}
</style>
